<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/gou.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/new_file.css" />
	<script src="./vue.js"></script>
</head>

<body>
	<div id="app">
		<div class="gou_bar">
			<div class="inner">
				<a href="index.php"><img src="img/logo.png" /></a>
				<ul class="bar_ul">
					<li>我的购物车</li>
					<li>确认订单信息</li>
					<li>等待付款</li>
					<li>订单执行</li>
				</ul>
			</div>

		</div>

		<div class="shopping">
			<h4>保税区</h4>

			<table id="cartTable">
				<thead>
					<tr>
						<th><label><input class="check-all check" v-model="ischeckall" type="checkbox" />&nbsp;全选</label></th>
						<th>商品信息</th>
						<th>商品单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr 
					v-for="(item,key) in cartData" 
					:key="item.id" 
					:item="item" 
					:k="key" 
					is="trCom"
					@addnum="addnum"
					@reducenum="reducenum"
					@del="del"
					@checkproduct="checkproduct"
					></tr>
				</tbody>
			</table>
			<div class="foot" id="foot">
				<label class="fl select-all"><input type="checkbox" v-model="ischeckall" class="check-all check" />&nbsp;全选{{ischeckall}}</label>
				<a @click="delchiose" class="fl delete" id="deleteAll" href="javascript:;">删除</a>

				<div class="fr closing">立即购买</div>
				<div class="fr total">合计：￥<span id="priceTotal">{{totalPrice}}.00</span></div>
				<div class="fr selected" id="selected">已选商品<span id="selectedTotal">{{totalNum}}</span>件<span
						class="arrow up">︽</span><span class="arrow down">︾</span></div>
				<div class="selected-view">
					<div id="selectedViewList" class="clearfix">
					</div>
					<span class="arrow">◆<span>◆</span></span>
				</div>
			</div>
		</div>


		<div class="last">
			<h5 class="last_h5">
				<img src="img/trduty_bg.jpg" />
				个人邮递进口物品清关税收解读
			</h5>
			<div class="last_bot">
				<ul>
					<li class="last_li0">个人邮递进境物品须界定为<a class="last_bot_sp1" href="">个人自用</a></li>
					<li><span class="last_li1">免征税</span>奶粉线征收跨境税，<span
							class="last_bot_sp2">取消50元以下免征额。美国线、快速线征收行邮税，50元以下免征额仍保留；</span></li>
					<li><span
							class="last_li2">非个人清关</span>奶粉线单次交易限值为人民币2000元（不分单件多件），个人年度交易限值为人民币20000元；美国线、快速线单个包裹限值≤1000（单件不可分割物品除外）；美国线单件不可物品限值≤5000；
					</li>
					<li><span
							class="last_li3">被税</span>自理关税；如果您的货物在海关被税，海关或海淘橙官方将通知您支付税费；我们不会预收关税，请您只需选择海淘橙官方支付方式进行税务的缴纳。
					</li>
				</ul>
			</div>
		</div>


		<div class="BOTTOM">
			<div class="BB">
				<img src="img/bot_slogan.png" alt="" />
			</div>
		</div>
		<!--死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        死亡线     死亡线                        -->
		<div class="BigBottom">
			<div class="Big">
				<div class="Big1">
					<p><a style="color: white;" href="#">海淘橙</a></p>
					<p class="Big1a"><a href="#">关于我们</a></p>
					<p class="Big1a"><a href="#">免责声明</a></p>
					<p class="Big1a"><a href="#">联系我们</a></p>
				</div>
				<div class="Big2">
					<p><a style="color: white;" href="#">海淘橙</a></p>
					<p class="Big1a"><a href="#">意见/建议</a></p>
					<p class="Big1a"><a href="#">海淘购物</a></p>
					<p class="Big1a"><a href="#">友情链接</a></p>
				</div>
				<div class="Big3">
					<p><a style="color: white;" href="#">帮助中心</a></p>
					<p class="Big1a"><a href="#">新手指南</a></p>
					<p class="Big1a"><a href="#">常见问题</a></p>
					<p class="Big1a"><a href="#">正品保证</a></p>
					<p class="Big1a"><a href="#">物流配送</a></p>
				</div>
				<div class="Big4">
					<p><a style="color: white;" href="#">资讯频道</a></p>
					<p class="Big1a"><a href="#">海淘咨询</a></p>
					<p class="Big1a"><a href="#">网站公告</a></p>
					<p class="Big1a"><a href="#">网站地图</a></p>
				</div>
				<div class="Big5"></div>
				<div class="Big6"></div>
				<div class="Big7">
					<span class="Big7a">微信订阅号</span>
					<span class="Big7b">扫一扫有惊喜</span>
					<img src="img/emw1.png" alt="" />
				</div>
				<div class="Big7">
					<span class="Big7a">微信订阅号</span>
					<span class="Big7b">扫一扫有惊喜</span>
					<img src="img/emw1.png" alt="" />
				</div>
				<div class="Big8"></div>
				<div class="Big9"></div>
				<div class="Big10">
					<p class="Big10a">关注我们</p>
					<img src="img/xlkjk.png" alt="" />
					<p class="Big10c">邮件订阅</p>
					<input class="Big10d" type="text" placeholder="请输入您的邮箱地址，订阅最新优惠" />
					<div class="Big10e">订阅</div>
				</div>
				<div class="Big11"></div>
				<div class="Big12"></div>
				<div class="Big13">Copyright 2012-2016 海淘橙 haitaocheng.com. All Rights Reserved.粤ICP备14073754号-1</div>
			</div>
		</div>

		<!--右侧购物栏-->
		<div class="right_l">
			<div class="regist_wrap">
				<div class="regist"></div>
			</div>
			<div class="regist_wrap2">
				<div class="regist2"></div>
				<p>一键购</p>
			</div>
			<div class="regist_wrap3">
				<div class="regist3"></div>
				<p>购物车</p>
			</div>
			<div class="regist_wrap4">
				<div class="regist4"></div>
			</div>
			<div class="regist_wrap5">
				<div class="regist5"></div>
			</div>
			<div class="regist_wrap6">
				<div class="regist6"></div>
			</div>
			<div class="regist_wrap7">
				<div class="regist7"></div>
			</div>

			<div class="regist_wrap8">
				<div class="regist8"></div>
			</div>
		</div>
	</div>
	<template id="trcom">
		<tr>
			<td class="checkbox"><input  class="check-one check" v-model="ischeck"   type="checkbox" /></td>
			<td class="goods"><img :src="item.imgurl"
					alt="" /><span>{{item.pname}}</span></td>
			<td class="price">{{item.price}}</td>
			<td class="count"><span class="reduce" @click="reduceNum(k,item)">{{item.num>1?'-':''}}</span><input class="count-input" type="text"
					:value="item.num" /><span class="add" @click="addnum(k)">+</span></td>
			<td class="subtotal">{{item.price*item.num}}</td>
			<td class="operation"><span @click="del(k)" class="delete">删除</span></td>
		</tr>

	</template>
<script>
	let cartData = [{
		id:1,
		pname:"飞利浦新安怡卡通企鹅杯学饮杯7安士200ml 训练水杯 防漏带手柄（2件装）",
		price:"460",
		imgurl:"img/images/20150708112148lm2t0.jpg",
		num:1,
		ischeck:false
	},
	{
		id:2,
		pname:"日本Merries花王新生儿纸尿裤S82",
		price:"420",
		imgurl:"img/images/201509091748430829.jpg",
		num:1,
		ischeck:false
	},
	{
		id:3,
		pname:"Sony/索尼 DSC-WX300",
		price:"400",
		imgurl:"img/images/3.jpg",
		num:1,
		ischeck:false
	},{
		id:4,
		pname:"韩国MOMMA手工陶瓷奶瓶（220ml,320ml）+保温夜光喂奶灯套装 多款颜色图案随机发货",
		price:"40",
		imgurl:"img/images/201608081427026196.jpg",
		num:1,
		ischeck:false
	}
]

	let trCom = {
		props:['item','k'],
		template:"#trcom",
		data:function(){
			return {
				ischeck:this.item.ischeck
			}
		},
		watch:{
			"item.ischeck":function(newvalue){
				// console.log("??",newvalue)
				this.ischeck = newvalue;
			},
			// 双绑 会更改数据 ，数据会变化 ，监听数据的变化 ，获取最新数据
			ischeck:function(newvalue){
				console.log(newvalue);
				this.$emit("checkproduct",{k:this.k,ischeck:newvalue})
			}
		},
		methods:{
			addnum(k){
				console.log(k);
				this.$emit("addnum",k);
			},
			reduceNum(k,item){
				// console.log(item);
				if(item.num>1){
					this.$emit("reducenum",k);
				}
			},
			del(k){
				this.$emit("del",k)
			},
			checkproduct(k){
				// console.log(item)
				// 改成watch
				setTimeout(()=>{
					// console.log(this.ischeck)
					this.$emit("checkproduct",{k,ischeck:this.ischeck})
				})
				// this.$emit("checkproduct",{k,ischeck:item.ischeck})
			}
		
		}
	}

	
	new Vue({
		el:"#app",
		data:{
			cartData
		},
		components:{
			trCom
		},
		methods:{
			addnum(k){
				this.cartData[k].num++;
			},
			reducenum(k){
				this.cartData[k].num--;
			},
			del(k){
				this.cartData.splice(k,1);
			},
			checkproduct(obj){
				// console.log("??",obj);
				this.cartData[obj.k].ischeck = obj.ischeck;
			},
			// 删除选中商品 ,ischeck = true;
			delchiose(){
				// 没有勾选的数据保存下来
				let res = this.cartData.filter(item=>!item.ischeck);
				this.cartData = res;
			}
		},
		// 计算属性
		computed:{
			// ischeckall(){
			// 	return this.cartData.every(item=>item.ischeck)
			// }
			ischeckall:{
				get(){
					if(this.cartData.length){
						return this.cartData.every(item=>item.ischeck)
					}else{
						return false;
					}
				},
				set(newvalue){
					// console.log(newvalue);
					this.cartData.forEach(item=>{
						item.ischeck = newvalue;
					})
					console.log(this.cartData);
				}
			},
			totalNum(){
				let total = 0;
				this.cartData.forEach(item=>{
					if(item.ischeck){
						total += item.num;
					}
				})
				return total;
			},
			totalPrice(){
				let total = 0;
				this.cartData.forEach(item=>{
					if(item.ischeck){
						total += item.price*item.num;
					}
				})
				return total;
			},
		}
	})



</script>
</body>

</html>